<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>IBO - Icon Builder for Odoo</title>

    <meta name="author" content="spilymp">
    <meta name="description" content="An simple Icon Builder for Odoo (IBO), which provide the ability to create app icons in the style of the appicons of the ERP system Odoo.">

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" type="text/css" href="css/milligram.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Simple Line Icons -->
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css"
        integrity="sha512-QKC1UZ/ZHNgFzVKSAhV5v5j73eeL9EEN289eKAEFaAjgAiobVAnVv/AGuPbXsKl1dNoel3kNr6PYnSiTzVVBCw=="
        crossorigin="anonymous" />

    <!-- Bootstrap Icons-->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" as="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" type="text/css">

    <!-- Remix Icons-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" type="text/css">

    <!-- Tabler Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" type="text/css">

    <!-- Weather Icons-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css" type="text/css">

    <script type="text/javascript" src="js/ibo_icon.js"></script>

    <script>

        document.addEventListener("DOMContentLoaded", function () {
            let icon = new IBO_ICON({
                'font_family': 'bootstrap-icons',
                'icon_class': 'bi bi-droplet',
            });
            icon.draw("icon");
        });

        function generate() {
            document.getElementById("icon").innerHTML = '';
            let icon = new IBO_ICON({
                'font_color': document.getElementById('iconFontColor').value,
                'font_family': document.getElementById('iconSet').value,
                'font_size': document.getElementById('iconFontSizeValue').value,
                'font_weight': document.getElementById('fontWeight').value,
                'icon_background': document.getElementById('iconBackgroundColor').value,
                'icon_class': document.getElementById('iconClass').value,
                'icon_width': document.getElementById('iconSizeValue').value,
                'odoo_version': document.getElementById('odooVersion').value,
            });
            icon.draw("icon");
        }

        function toggle_settings() {
            document.querySelectorAll('.settings-card').forEach(function (element) {
                element.classList.toggle('deactivated');
            });
        }

        function download() {
            let image = document.getElementsByClassName('ibo-icon-canvas')[0].toDataURL("image/png").replace("image/png", "image/octet-stream");
            document.getElementById('download').setAttribute('href', image);
        }

        function populateIconSetWebsite() {
            switch (document.getElementById('iconSet').value) {
                case "Font Awesome 5 Brands":
                    document.getElementById('iconSetWebsite').href = "https://fontawesome.com/v5/search?o=r&m=free&f=brands"
                    document.getElementById('iconClass').placeholder = "e.g. fab fa-github"
                    break;
                case "FontAwesome":
                    document.getElementById('iconSetWebsite').href = "https://fontawesome.com/v4/icons/"
                    document.getElementById('iconClass').placeholder = "e.g. fa fa-bath"
                    break;
                case "bootstrap-icons":
                    document.getElementById('iconSetWebsite').href = "https://icons.getbootstrap.com/"
                    document.getElementById('iconClass').placeholder = "e.g. bi bi-droplet"
                    break;
                case "simple-line-icons":
                    document.getElementById('iconSetWebsite').href = "https://simplelineicons.github.io/"
                    document.getElementById('iconClass').placeholder = "e.g. icon-globe-alt"
                    break;
                case "remixicon":
                    document.getElementById('iconSetWebsite').href = "https://remixicon.com/"
                    document.getElementById('iconClass').placeholder = "e.g. ri-customer-service-line"
                    break;
                case "tabler-icons":
                    document.getElementById('iconSetWebsite').href = "https://tabler-icons.io/"
                    document.getElementById('iconClass').placeholder = "e.g. ti ti-bone-off"
                    break;
                case "weathericons":
                    document.getElementById('iconSetWebsite').href = "http://erikflowers.github.io/weather-icons/"
                    document.getElementById('iconClass').placeholder = "e.g. wi-day-sleet-storm"
                    break;
                default:
                    document.getElementById('iconSetWebsite').href = "https://fontawesome.com/v5/search?m=free&s=solid%2Cregular"
                    document.getElementById('iconClass').placeholder = "e.g. fas fa-carrot"
                    break;
            }
        }

    </script>

</head>

<body>

    <!-- pre loading the fonts so they are available for the js class -->
    <div class="font_preload" style="opacity: 0">
        <span style="font-family: 'Font Awesome 5 Free', Arial, sans-serif;"></span>
        <span style="font-family: 'Font Awesome 5 Brands', Arial, sans-serif;"></span>
        <span style="font-family: 'FontAwesome', Arial, sans-serif;"></span>
        <span style="font-family: 'bootstrap-icons', Arial, sans-serif;"></span>
        <span style="font-family: 'simple-line-icons', Arial, sans-serif;"></span>
        <span style="font-family: 'remixicon', Arial, sans-serif;"></span>
        <span style="font-family: 'tabler-icons', Arial, sans-serif;"></span>
        <span style="font-family: 'weathericons', Arial, sans-serif;"></span>
    </div>

    <header class="container">
        <div class="row">
            <div class="column align-center">
                <h1>IBO - Icon Builder for Odoo</h1>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="row row-center">
            <div class="column align-center settings-card front">

                <div class="row">
                    <div class="column column-center">
                        <label for="odooVersion">Odoo Version</label>
                    </div>
                    <div class="column">
                        <select id="odooVersion">
                            <option value="15.0">Odoo 15</option>
                            <option value="14.0">Odoo 14</option>
                            <option value="13.0">Odoo 13</option>
                            <option value="12.0">Odoo 12</option>
                            <option value="11.0">Odoo 11</option>
                        </select>
                    </div>
                </div>

                <div class="row icon-set-website">
                    <div class="column column-center column-50">
                        <label for="iconSet">Icon Set</label>
                    </div>

                    <div class="column column-40">
                        <select id="iconSet" onchange="populateIconSetWebsite()">
                            <option value="Font Awesome 5 Free">Font Awesome 5 Solid & Regular</option>
                            <option value="Font Awesome 5 Brands">Font Awesome 5 Brands</option>
                            <option value="FontAwesome">Font Awesome 4.7</option>
                            <option value="bootstrap-icons">Bootstrap Icons</option>
                            <option value="simple-line-icons">Simple Line Icons</option>
                            <option value="remixicon">Remix Icon</option>
                            <option value="tabler-icons">Tabler Icons</option>
                            <option value="weathericons">Weather Icons</option>
                        </select>
                    </div>

                    <div class="column">
                        <a href="https://fontawesome.com/v5/search?m=free&s=solid%2Cregular" id="iconSetWebsite"
                            class="button button-outline" target="_blank">
                            <i class="fas fa-globe-europe button-icon"></i>
                        </a>
                    </div>
                </div>

                <div class="row">
                    <div class="column column-center">
                        <label for="iconClass">Icon Class</label><i id="icon-preview"></i>
                    </div>
                    <div class="column">
                        <input id="iconClass" type="text" placeholder="e.g. fas fa-address-card">
                    </div>
                </div>

                <div class="row">
                    <div class="column column-center">
                        <label for="iconBackgroundColor">Icon Background Color</label>
                    </div>
                    <div class="column">
                        <input type="color" onchange="clickColor(0, -1, -1, 5)" value="#9b4dca"
                            id="iconBackgroundColor">
                    </div>
                </div>

                <div class="row">
                    <div class="column align-right">
                        
                        <button class="button button-outline" type="submit" value="Switch Settings" onclick="toggle_settings()">
                            <i class="fas fa-sliders-h button-icon"></i>
                        </button>

                        <button class="button button-outline" type="submit" value="Generate" onclick="generate()">
                            <i class="fas fa-play button-icon"></i>
                        </button>

                        <a id="download" download="odoo_icon.png">
                            <button type="submit" value="Download" onclick="download()">
                                Download
                            </button>
                        </a>

                    </div>
                </div>

            </div>

            <div class="column align-center settings-card back deactivated">

                <div class="row">
                    <div class="column column-center">
                        <label for="iconFontColor">Icon Font Color</label>
                    </div>
                    <div class="column">
                        <input id="iconFontColor" type="color" onchange="clickColor(0, -1, -1, 5)" value="#ffffff">
                    </div>
                </div>

                <div class="row">

                    <div class="column column-center">
                        <label for="iconSize">Icon Size</label>
                    </div>
                    <div class="column">
                        <div class="row" id="iconSize">
                            <div class="column column-center">
                                <input id="iconSizeSlider" type="range" value="300" min="100" max="800" oninput="document.getElementById('iconSizeValue').value = this.value">
                            </div>
                            <div class="column column-center">
                                <input id="iconSizeValue" type="text" value="300">
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="column column-center">
                        <label for="iconFontSize">Icon Font Size</label>
                    </div>
                    <div class="column">
                        <div class="row" id="iconFontSize">
                            <div class="column column-center">
                                <input id="iconFontSizeSlider" type="range" value="150" min="00" max="800" oninput="document.getElementById('iconFontSizeValue').value = this.value">
                            </div>
                            <div class="column column-center">
                                <input id="iconFontSizeValue" type="text" value="150">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="column column-center">
                        <label for="fontWeight">Icon Font Weight</label>
                    </div>
                    <div class="column">
                        <select id="fontWeight">
                            <option value="900" selected>Normal</option>
                            <option value="300">Light</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="column align-right">

                        <button class="button button-outline" type="submit" value="Switch Settings" onclick="toggle_settings()">
                            <i class="fas fa-sliders-h button-icon"></i>
                        </button>

                        <button class="button button-outline" type="submit" value="Generate" onclick="generate()">
                            <i class="fas fa-play button-icon"></i>
                        </button>

                        <a id="download" download="odoo_icon.png">
                            <button type="submit" value="Download" onclick="download()">
                                Download
                            </button>
                        </a>

                    </div>
                </div>

            </div>

            <div class="column align-center">
                <div id="icon"></div>
            </div>

        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="column">
                <h2>Documentation</h2>
            </div>
        </div>
        <div class="row">
            <div class="column">
                <p class="section-description">
                    The configurator above can be used to quickly and easily create new appicons in the style of the
                    appicons of the ERP system <a href="https://www.odoo.com/" rel="external nofollow">Odoo</a>.

                    To set an icon you have to find and enter the corresponding css class.
                    Please check the corresponding page of the icon set for this purpose:
                <ul>
                    <li><a href="https://fontawesome.com/v5/search?m=free&s=solid%2Cregular">Font Awesome 5 Solid &
                            Regular</a></li>
                    <li><a href="https://fontawesome.com/v5/search?m=free&s=brands">Font Awesome 5 Brands</a></li>
                    <li><a href="https://fontawesome.com/v4/icons/">Font Awesome 4.7</a></li>
                    <li><a href="https://icons.getbootstrap.com/">Bootstrap Icons</a></li>
                    <li><a href="https://simplelineicons.github.io/">Simple Line Icons</a></li>
                    <li><a href="https://remixicon.com/">Remix Icon</a></li>
                    <li><a href="https://tabler-icons.io/">Tabler Icons</a></li>
                    <li><a href="http://erikflowers.github.io/weather-icons/">Weather Icons</a></li>
                </ul>
                <span><strong>Note:</strong> The icon pack which Odoo uses up to version 15 is Font Awesome 4.7!</span>
                </p>
            </div>
        </div>

        <div class="row">
            <div class="column">
                <h3>Getting Started</h3>
            </div>
        </div>
        <div class="row row-center">
            <div class="column">
                <p>
                    It is also possible to use the class elsewhere and create your own configurator based on it, for
                    example.
                    For this purpose, the class offers a few more parameters for individualization in addition to the
                    options shown above.
                </p>
            </div>
        </div>
        <div class="row row-center">
            <div class="column">
                <p>
                    The basis of the configurator is a JavaScript class "IBO_ICON", which creates a canvas and "paints"
                    the icon on it.
                    If the existing class is used directly by means of a script, additional parameters can be passed.
                    If this class is instantiated, various parameters can be passed to it (see sample code block on the
                    right).
                    If not, default values are used in each case.
                </p>
            </div>
            <div class="column">
                <pre>
                        <code>[...]
let icon = new IBO_ICON({
    'font_family': 'bootstrap-icons',
    'icon_class': 'bi bi-droplet',
});
[...]</code>
                </pre>
            </div>
        </div>

        <div class="row row-center">
            <div class="column">
                <p>
                    The actual creation then takes place in the "draw" method.
                    The ID of an HTML element to which the created canvas is attached must be specified here as a
                    parameter.
                </p>
            </div>
            <div class="column">
                <pre>
                        <code>[...]
icon.draw("icon");
[...]</code>
                </pre>
            </div>
        </div>

        <div class="row">
            <h3>Parameter</h3>
        </div>

        <div class="row">
            <div class="column">

                <table>
                    <thead>
                        <tr>
                            <th>Parameter</th>
                            <th>Values</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>font_color</td>
                            <td>e.g. "#ffffff"</td>
                            <td>Hex color value for the text or symbol.</td>
                        </tr>
                        <tr>
                            <td>font_family</td>
                            <td>e.g. "Font Awesome 5 Free"</td>
                            <td>Font family for your text or symbol. Make sure the family is added to your page!</td>
                        </tr>
                        <tr>
                            <td>font_size</td>
                            <td>e.g. "40"</td>
                            <td>Font size for your text or symbol.</td>
                        </tr>
                        <tr>
                            <td>font_weight</td>
                            <td>e.g. "900"</td>
                            <td>Font weight for your text or symbol.</td>
                        </tr>
                        <tr>
                            <td>icon_background</td>
                            <td>e.g. "#9b4dca"</td>
                            <td>Hex color value for the background of your icon.</td>
                        </tr>
                        <tr>
                            <td>icon_class</td>
                            <td>e.g. "fas fa-address-card"</td>
                            <td>CSS class name of your symbol for the icon, the class will automatically try to find
                                the corresponding unicode. If an unicode (parameter "icon_text") is set the class will
                                be ignored.</td>
                        </tr>
                        <tr>
                            <td>icon_text</td>
                            <td>e.g. "Test"</td>
                            <td>The text or symbol which should be displayed on the icon. Will be preferred over the
                                parameter "icon_class" if set.</td>
                        </tr>
                        <tr>
                            <td>icon_width</td>
                            <td>e.g. "300"</td>
                            <td>The width of your icon (in px), will also be the height of your icon.</td>
                        </tr>
                        <tr>
                            <td>odoo_version</td>
                            <td>["11.0", "12.0", "13.0", "14.0", "15.0"]</td>
                            <td>The odoo version for which the icon should be generated.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <footer class="container">
        <div class="row">
            <hr />
        </div>
        <div class="row">
            <div class="column column-50">
                <p>
                    Created with <i class="fas fa-heart"></i> by <a href="https://github.com/spilymp">spilymp</a>.
                </p>
            </div>
            <div class="column column-50 align-right">
                <p>
                    View Source Code on <a href="https://github.com/spilymp/ibo"><i class="fab fa-github"></i></a>
                </p>
            </div>
        </div>
    </footer>
</body>

</html>
